/* 
    Document   : estilo
    Created on : 20/11/2013, 10:23:34
    Author     : Gustavo
    Description:
        Purpose of the stylesheet follows.
*/
*{
/*    margin:0;
    padding:0;*/
}

           
body{
  font-family:arial,sans-serif;
  font-size:100%;
  margin:3em;
  background:#666;
}
ul,li{
  list-style:none;
}

ul{
  overflow:hidden;
  padding:3em;
}

ul li a{
  text-decoration:none;
  color:#000;
  background:#ffc;
  display:block;
  height: 13.5em;
  width: 13.5em;
  padding: 0.85em;
  -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
  -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  -moz-transition:-moz-transform .15s linear;
  -o-transition:-o-transform .15s linear;
  -webkit-transition:-webkit-transform .15s linear;
}


ul li{
  margin:1em;
  float:left;
}
ul li h2.tituloDaNota{
  font-size:140%;
  font-weight:bold;
  padding:0px 0px 10px 0px;
  margin: 0px;
}
ul li p.conteudoDaNota{
  font-family:"Reenie Beanie",arial,sans-serif;
  text-align: justify;
  
}
ul li a{
  -webkit-transform: rotate(-6deg);
  -o-transform: rotate(-6deg);
  -moz-transform:rotate(-6deg);
}
ul li:nth-child(even) a{
  -o-transform:rotate(4deg);
  -webkit-transform:rotate(4deg);
  -moz-transform:rotate(4deg);
  position:relative;
  top:5px;
  background:#cfc;
}
ul li:nth-child(3n) a{
  -o-transform:rotate(-3deg);
  -webkit-transform:rotate(-3deg);
  -moz-transform:rotate(-3deg);
  position:relative;
  top:-5px;
  background:#ccf;
}
ul li:nth-child(5n) a{
  -o-transform:rotate(5deg);
  -webkit-transform:rotate(5deg);
  -moz-transform:rotate(5deg);
  position:relative;
  top:-10px;
}
ul li a:hover,ul li a:focus{
  box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
  position:relative;
  z-index:5;
}

/* Login */

#loginDivTodo{
    text-align: center;
    width: 100%;
}

#loginForm > table{
    width: 100%;
}

.nota{
    font-family: cursive;
    width: 300px;
    height: 200px;
    display: inline-block;
    padding: 0px;
    text-align: left;
    box-shadow: 1px 1px 1px darkgray;
    position: relative;
    background-color: #ffc;
    
    margin-top: 30px;

    transition: transform .15s linear, box-shadow .15s linear ;
    -moz-transition:-moz-transform .15s linear, box-shadow .15s linear ;
    -o-transition:-o-transform .15s linear, box-shadow .15s linear ;
    -webkit-transition:-webkit-transform .15s linear, box-shadow .15s linear ;;


    -webkit-transform: rotate(-6deg);
    -o-transform: rotate(-6deg);
    -moz-transform:rotate(-6deg);
}

.nota:hover{
    box-shadow: 5px 5px 5px rgba(0,0,0,.5);
    -moz-box-shadow: 5px 5px 5px rgba(0,0,0,.5);
    -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,.5);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    position:relative;
    z-index:5;
}

.nota > .notaTitulo{
    font-family: arial,sans-serif;
    border-bottom: 0px;
    height: 7%;
    margin: 0px 0px 15px 0px;
    padding: 4px 0px 4px 7px;
}

.nota > .notaConteudo{
    padding: 20px 20px 10px 15px;
    border-top: 0px;
    height: 87%;
    margin: 0px;
}


#btnLogin{
    width: 32px;
    height: 32px;
    background-color: transparent;
    background-image: url("../img/door.png");
    opacity: 0.8;
    border: none;
    outline: none;
}

#btnLogin:hover{
    background-image: url("../img/door_in.png");
    opacity: 1;
}


#alertWrapper{
    text-align: center;
    position: fixed;
    width: 100%;
    height: 100%;
    top:0px;
    left:0px;
    background-color: rgba(5, 5, 5, 0.7);
    z-index: 3;
}

#alertCriarNota{
    margin: 100px auto;
    width: 550px;
    padding:14px;
    border: dotted 7px #b7ddf2;
    background:#ebf4fb;
    text-align: left;
}

#formCriarNota > label{
    width: 200px;
}
#formCriarNota > label > input{
    float: right;
}

#formCriarNota{
    text-align: left;
    margin: 2px auto;
}

#novaNota{
    width: 34px;
    height: 34px;
    background-image: url("../img/note_add.png");
    background-color: transparent;
    border: 0px;
    outline: none;
    opacity: 0.7;
    background-position: center;
    background-repeat: no-repeat;
}
#novaNota:hover{
    opacity: 1;
}

.deleteNota{
    position: absolute;
    bottom: 8px;
    right: 12px;
    width: 16px;
    height: 16px;
    background-image: url("../img/bin_closed.png");
    background-position: center;
    opacity: 0.8;
}

.deleteNota:hover{
    background-image: url("../img/bin_empty.png");
}

#btnCriarNota{
    background-image: url("../img/add.png");
    background-position: center;
    width: 32px;
    height: 32px;
    background-color: transparent;
    border: none;
    outline: none;
    opacity: 0.8;
}
#btnCriarNota:hover{
    opacity: 1;
}